<script lang="ts" setup>

import {ref, watch} from "vue"
import {useRouter} from 'vue-router'
import {deleteUsrCat, getusrCat, putUsrCat} from "../serve"
import {ElMessage} from "element-plus";
const
    router = useRouter(),
    itemData = ref([]),
    allSe = ref(-1),
    load = ref(true),
    price = ref(0),
    vipPrice = ref(0),
    userInfo = ref(JSON.parse(sessionStorage.getItem('userInfoSy')))
;
function get() {
  // console.log(132)
  getusrCat().then((r:any)=>{
    for (let i = 0 ; i < r['list'].length ; i ++){
      r['list'][i]['select'] = false
    }
    itemData.value = r['list']
    load.value = false
    console.table(itemData.value)
  })
}
get()

function deleChange(id:any,index:any){
  deleteUsrCat(id).then(()=>{
    ElMessage({type:'success',message:'删除成功！',duration:1500})
    itemData.value.splice(index,1)
  })
}
watch(()=>itemData.value,(a)=>{
  let inSt:boolean[] = []
  for (let i = 0; i < a.length; i++) {
    inSt.push(a[i]['select'])
  }
  let se:number
  const istIndex = inSt.findIndex((e)=>e)
  if (istIndex != -1){
    const isfIndex = inSt.findIndex((e)=>!e)
    if (isfIndex != -1){
      se = 0
    }else {
      se = 1
    }
  }else {
    se = -1
  }
  allSe.value = se
},{deep:true})

function nbChange(a,b) {
  putUsrCat(b,a).then(()=>{
    abtPre()
  })
}
function RemSedChange() {
  itemData.value.forEach(e=>e['select'] = false)
  abtPre()
}
function Sechange(value:number) {
  if (value == -1 || value == 0){
    addSedChange()
  }else {
    RemSedChange()
  }
  abtPre()
}
function addSedChange() {
  itemData.value.forEach(e=>e['select'] = true)
  abtPre()
}
function abtPre() {
  price.value = 0
  vipPrice.value = 0
  itemData.value.forEach(e=>{
    if (e['select']){
      price.value += parseFloat(String(e['productPrice'] * e['productNum']))
      vipPrice.value += parseFloat(String(e['productVipPrice'] * e['productNum']))
    }
  })
}
function puy() {
  let list:any = []
  itemData.value.forEach(e=>{
    if (e['select']){
      list.push({id:e['productId'],carId:e['id'],image:e['productImg'],isCollect:false,num:e['productNum'],price:e['productPrice'],
        sliderImage:[],storeInfo:e['productInfo'],storeName:e['productName'],vipPrice:e['productVipPrice']
      })
    }
  })
  if (list.length == 0){
    ElMessage({type:'error',message:'请选择要结算的鲜花商品！',duration:1500})
    return
  }
  sessionStorage.setItem('checkoutInfoList',JSON.stringify([...list]))
  sessionStorage.setItem('preOrderType','shoppingCart')
  router.push({path:'/checkout',query:{id:'true'}}).catch(()=>true)
}
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <el-card>
      <template #header>
        <div carrel-top>
          <div Title>购物车</div>
          <div check>
            <img @click="addSedChange" v-if="allSe == -1" a alt="" src="/no-select-a.svg">
            <img @click="addSedChange" v-if="allSe == -1" alt="" b src="/no-select-b.svg">
            <img @click="addSedChange" v-if="allSe == 0" alt="" c src="/no-select-c.svg">
            <img v-if="allSe == 1" @click="RemSedChange" alt="" src="/selected.svg">
            <div @click="Sechange(allSe)">全选</div>
          </div>
        </div>
      </template>
      <div container>
        <div v-for="(i,index) in itemData" style="display: flex;align-items: center;" :key="i['id']">
          <img a alt="" :src="i['select'] ?'/selected.svg' : '/no-select-a.svg'" @click="()=>{i['select'] = !i['select'];abtPre()}">
          <div l-container>
            <div line/>
            <img alt="" :src="i['productImg']"/>
            <div right style="color: #2c2c2c;">
              <div top>
                <div>{{ i['productName'] }}</div>
                <div>{{ '¥' + i['productPrice'] }}</div>
              </div>
              <div synopsis>{{ i['productInfo'] }}</div>
              <div bottom>
                <el-input-number v-model="i['productNum']" :step="1" min="1" @change="nbChange(i['productNum'],i['id'])"/>
                <div b-r @click="deleChange(i['id'],index)">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 150px;"></div>
      </div>
      <div checkout>
        <div top>订单详情</div>
        <div price>
          <div>价格</div>
          <div>¥ {{userInfo?(userInfo['vip'] ? vipPrice.toFixed(2) : price.toFixed(2)):0}}</div>
        </div>
        <div price>
          <div>会员优惠</div>
          <div>¥ {{userInfo? (userInfo['vip'] ? (price - vipPrice).toFixed(2) : '0.00'):0}}</div>
        </div>
        <div price>
          <div>邮费</div>
          <div style="color:#FBADC4;">免费</div>
        </div>
        <div style="width: 100%;height: 2px;background-color: #d0d0d0"/>
        <div submit @click="puy">前往结账</div>
      </div>
    </el-card>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[carrel-top] {
  display: flex;

  [Title] {
    font-size: 25px;
    margin-left: 18px;
    margin-right: 80px;
  }

  [check] {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666666;
    cursor: pointer;

    [c] {
      width: 14px;
      height: 14px;
    }

    [a] {
      display: block;
    }

    [b] {
      display: none;
    }

    &:hover {
      [a] {
        display: none;
      }

      [b] {
        display: block;
      }

      color: #409EFF;
    }

    img {
      width: 15px;
      height: 15px;
      margin-right: 10px;
    }

  }

}
[container] {
  margin-left: 40px;

  [a] {
    width: 15px;
    height: 15px;
    cursor: pointer;
  }

  [l-container] {
    width: calc(100% - 550px);
    display: flex;
    justify-content: start;
    padding: 40px 0;
    position: relative;
    margin-left: 10px;

    [line] {
      width: 100%;
      bottom: 0;
      height: 2px;
      position: absolute;
      background-color: #eeeeee;
    }

    img {
      margin-right: 20px;
      width: 150px;
      height: 150px;
      border-radius: 10px;
    }

    [right] {
      flex: 1;

      [top] {
        display: flex;
        justify-content: space-between;
      }

      [synopsis] {
        margin-top: 15px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      [bottom] {
        position: absolute;
        bottom: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        [b-r] {
          color: #e13030;
          font-size: 14px;
          cursor: pointer;
          margin-left: 50px;
        }
      }
    }
  }

}

[checkout] {
  width: 260px;
  height: 380px;
  border: 2px solid #E7E7EA;
  border-radius: 10px;
  padding: 50px 30px;
  position: absolute;
  top: 145px;
  right: 150px;

  [top] {
    font-size: 22px;
    margin-bottom: 30px;
  }

  [price] {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  [submit] {
    background-color: #d71d52;
    margin-top: 50px;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
  }
}
</style>